<template>
  <div class="station-list-container">
    <n-card :bordered="false">
      <!-- 页面标题和操作栏 -->
      <div class="header-bar">
        <h2>站点管理</h2>
        <n-button type="primary" :loading="loading" @click="handleAddStation">添加站点</n-button>
      </div>

      <!-- 数据表格 -->
      <n-data-table :columns="columns" :data="stations" :loading="loading" class="station-table" :pagination="{
          pageSize: pageSize,
        }" />
    </n-card>
  </div>
</template>

<script setup>
import { ref, onMounted, h } from "vue";
import { NCard, NDataTable, NButton, NTag, NSpace, useMessage } from "naive-ui";
import axios from "axios";
import { useRouter } from "vue-router";
import { API_URLS } from '../../utils/apiConfig';

const router = useRouter();
const message = useMessage();

// 状态管理
const loading = ref(false);
const stations = ref([]);
// 分业管理
const pageSize = ref(10);

// 站点类型映射
const stationTypeMap = {
  charging: "warning",
  inbound: "default",
  outbound: "success",
  sorting: "primary",
  maintenance: "danger",
  unknown: "info",
};

// 中文映射
const stationTypeMapZh = {
  charging: "充电站",
  inbound: "入站站",
  outbound: "出站站",
  sorting: "分拣站",
  maintenance: "维护站",
  unknown: "未知站",
  node: "节点",
};

// 表格列定义
const columns = [
  {
    title: "站点名称",
    key: "name",
    width: 180,
  },
  {
    title: "站点类型",
    key: "type",
    width: 120,
    render(row) {
      return h(NTag, { type: stationTypeMap[row.type] || "default" }, { default: () => stationTypeMapZh[row.type] || row.type });
    },
  },
  {
    title: "站点状态",
    key: "status",
    width: 120,
  },
  {
    title: "X坐标",
    key: "x",
    width: 100,
  },
  {
    title: "Y坐标",
    key: "y",
    width: 100,
  },
  {
    title: "描述",
    key: "description",
    ellipsis: true,
  },
  {
    title: "操作",
    key: "action",
    width: 160,
    render(row) {
      return h(
        NSpace,
        { size: "small" },
        {
          default: () => [
            h(NButton, { size: "small", onClick: () => handleEditStation(row.id) }, { default: () => "编辑" }),
            h(NButton, { size: "small", type: "error", onClick: () => handleDeleteStation(row.id) }, { default: () => "删除" }),
          ],
        }
      );
    },
  },
];

// 使用配置文件中的API地址
const STATIONS_API = API_URLS.map_node.base;

// 获取站点列表
const fetchStations = async () => {
  loading.value = true;
  try {
    const response = await axios.get(API_URLS.map_node.page, {
      params: {
        page: 1,
        page_size: 1000,
      },
    });

    if (response.data.code === 200) {
      stations.value = response.data.data;
    } else {
      message.error(`获取数据失败: ${response.data.msg || "未知错误"}`);
    }
  } catch (error) {
    message.error(`网络错误: 无法连接到服务器 (${error.message})`);
  } finally {
    loading.value = false;
  }
};

// 添加站点
const handleAddStation = () => {
  router.push("/AGV/Station_add");
};

// 编辑站点
const handleEditStation = (id) => {
  router.push({ path: `/AGV/Station_edit/${id}` });
};

// 删除站点
const handleDeleteStation = async (id) => {
  loading.value = true;
  if (confirm("确定要删除这个站点吗？")) {
    try {
      const response = await axios.delete(`${API_URLS.map_node.delete}/${id}`, {
        params: {},
      });

      if (response.data.code === 200) {
        message.success("站点删除成功");
        fetchStations(); // 重新加载数据
      } else {
        message.error(`删除失败: ${response.data.msg || "未知错误"}`);
      }
    } catch (error) {
      message.error(`网络错误: 无法删除站点 (${error.message})`);
    } finally {
      loading.value = false;
    }
  }
};

// 组件挂载时加载数据
onMounted(() => {
  fetchStations();
});
</script>

<style scoped>
.station-list-container {
  padding: 20px;
}

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-bar h2 {
  margin: 0;
  font-size: 20px;
}

.station-table {
  margin-top: 10px;
}
</style>
